<template>
  <div class="ele-icon-picker">
    <el-dropdown :trigger="trigger">
      <el-input
        v-model="modelValue"
        :size="size"
        :placeholder="placeholder"
        width="200px"
      >
        <template #suffix>
          <i
            v-if="modelValue"
            class="el-input__icon el-icon-error"
            @click="empty"
          />
        </template>
        <template
          v-if="prepend"
          #prepend
        >
          <i :class="modelValue" />
        </template>
      </el-input>
      <template #dropdown>
        <el-dropdown-menu
          class="ele-icon-picker-content"
          :style="{ height: !pagination ? '300px' : '' }"
        >
          <div class="ele-icon-picker-search">
            <el-input
              v-model="iconVal"
              size="medium"
              clearable
              @input="search"
              @clear="emptyVal"
            />
          </div>
          <el-dropdown-item
            v-for="(item, index) in datas"
            :key="index"
            class="ele-icon-picker-content-icon"
            :class="modelValue == item ? 'active' : ''"
            @click="select(item)"
          >
            <i :class="item" />
          </el-dropdown-item>
          <template v-if="pagination">
            <div
              v-if="iconLeng > 0"
              class="icon__footer"
            >
              <span class="icon__count">共 {{ iconLeng }} 条</span>
              <el-button
                size="mini"
                class="btn-prev"
                :disabled="isPrev"
                @click="prev"
              >
                <i class="el-icon el-icon-arrow-left" />
              </el-button>
              <el-button
                size="mini"
                class="btn-next"
                :disabled="isNext"
                @click="next"
              >
                <i class="el-icon el-icon-arrow-right" />
              </el-button>
            </div>
          </template>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script setup lang="ts">
import { ElDropdownMenu, ElDropdownItem, ElCol, ElRow } from 'element-plus'
import elementList from '../Resource/icon/element.js'
import {
  defineProps,
  ref,
  toRefs,
  useContext,
  watchEffect,
} from '@vue/runtime-core'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  size: {
    type: String,
  },
  trigger: {
    type: String,
    default: 'hover',
  },
  placeholder: {
    type: String,
    default: '',
  },
  data: {
    type: Array,
    default: [],
  },
  prepend: {
    type: Boolean,
    default: true,
  },
  pagination: {
    type: Boolean,
    default: false,
  },
})

let pageNumber = 1
let isPrev = ref(true) // 是否禁用上一页
let isNext = ref(false) // 是否禁用下一页
let iconLeng = ref(0) // icon数据长度
const datas = ref([] as any)
const iconVal = ref('')

const render = (index = 0, pageSize = 25) => {
  if (props.data && props.data.length > 0) {
    datas.value = props.data.slice(index, pageSize)
    iconLeng.value = props.data.length
  } else {
    datas.value = elementList.slice(index, pageSize)
    iconLeng.value = elementList.length
  }
}

const check = () => {
  if (props.data && props.data.length > 0) {
    if (props.data.length < 25) isNext.value = true
  } else {
    if (elementList.length < 25) isNext.value = true
  }
}

render()
check()

// 上一页
const prev = () => {
  pageNumber -= 1
  isNext.value = false
  let start = pageNumber * 25
  render(start, 25 * (1 + pageNumber))
  if (pageNumber === 0) {
    isPrev.value = true
    return false
  }
}

const next = () => {
  pageNumber += 1
  isPrev.value = false
  let start = pageNumber * 25
  render(start, 25 * (1 + pageNumber))
  if (pageNumber === Math.ceil(elementList.length / 25) - 1) {
    isNext.value = true
    return false
  }
}

const context = useContext()

const select = function (value: string) {
  context.emit('update:modelValue', value)
}

const getStateData = () => {
  if (props.data && props.data.length > 0) return props.data
  if (!props.pagination) {
    datas.value = elementList
    return datas.value
  } else {
    return datas.value
  }
}

getStateData()

const search = () => {
  const search = elementList.reduce((init: string[], el: string) => {
    if (el.endsWith(iconVal.value)) {
      init.push(el)
    }
    return init
  }, [])
  if (search.length <= 0) {
    iconLeng.value = 0
  }
  if (!props.pagination) {
    datas.value = search
  }
  if (props.pagination) {
    datas.value = search
    if (iconVal.value === '') {
      render()
    }
  }
}

const emptyVal = () => {
  if (!props.pagination) {
    console.log(search)
  }
}

const empty = function () {
  context.emit('update:modelValue')
}
</script>

<style>
.ele-icon-picker-content {
  width: 260px !important;
}
.ele-icon-picker-content-icon {
  border-radius: 4px !important;
  margin: 5px !important;
  padding-left: 10px !important;
  padding-right: 5px !important;
  font-size: 20px !important;
  display: inline-block !important;
  border: 1px solid whitesmoke !important;
  color: #606266 !important;
}
.ele-icon-picker-content-icon:hover,
.ele-icon-picker-content-icon.active {
  color: white !important;
  background-color: #409eff !important;
}
.icon__footer {
  text-align: right;
  color: #515a6e;
  margin-top: 5px;
  margin-right: 5px;
}
.icon__count {
  margin-right: 10px;
}
.btn-prev,
.btn-next {
  width: 30px;
  padding: 0 !important;
  border: 0 !important;
  background: #f4f4f5 !important;
}
.ele-icon-picker-search {
  margin-left: 5px;
  margin-right: 5px;
}
</style>
